<template>
    <div>
        <div class="site-header_placeholder__KcA86 "></div>
        <header class="site-header_header__PTnp0  ">

            <div class="xai-container">
                <div class="site-header_foreground__etqdK">
                    <div class="site-header_logo__QGAGJ"><a class="site-header_logoLink__9rqP5" href="/"><svg
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="32" height="32">
                                <g>
                                    <polygon fill="#fff"
                                        points="226.83 411.15 501.31 803.15 623.31 803.15 348.82 411.15 226.83 411.15">
                                    </polygon>
                                    <polygon fill="#fff"
                                        points="348.72 628.87 226.69 803.15 348.77 803.15 409.76 716.05 348.72 628.87">
                                    </polygon>
                                    <polygon fill="#fff"
                                        points="651.23 196.85 440.28 498.12 501.32 585.29 773.31 196.85 651.23 196.85">
                                    </polygon>
                                    <polygon fill="#fff"
                                        points="673.31 383.25 673.31 803.15 773.31 803.15 773.31 240.44 673.31 383.25">
                                    </polygon>
                                </g>
                            </svg></a>
                    </div>


                    <div class="hidden md:flex site-header_mainNav__M1I3L">
                        <a href="/grok">Grok</a>
                        <a href="/api">API</a>
                        <a href="/blog">Blog</a>
                        <a href="/about">About</a>
                        <a href="/careers">Careers</a>
                    </div>


                    <div class="hidden sm:flex site-header_integrations__Za5ws"></div>

                    <div class="flex sm:hidden">
                        <div class="site-header_integrations__Za5ws">
                            <button class="site-header_menuBtn__iQKk8">Menu</button>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="xai-container">
            <div class="grok-outline-teaser_teaser__opHLa">
                <div class="row">
                    <div class="col-sm-10 offset-sm-1">
                        <div class="grok-outline-teaser_grok__Zcb_U">
                            <div class="grok-outline_logo__Oi8QD">
                                <svg class="grok-outline_outline__pwT8v" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 1050 325.07">
                                    <mask id="stroke">
                                        <rect x="0" y="0" width="1050" height="325.07" fill="#fff"></rect>
                                        <path class="grok-outline_dash__8_zAL" fill="#fff"
                                            d="m5,162.92c0-27.97,4.83-52.77,14.5-74.39,9.66-21.61,23.78-38.53,42.35-50.74,18.56-12.21,41.07-18.31,67.53-18.31,31.28,0,55.38,7.25,72.3,21.75,16.91,14.5,28.04,33.83,33.38,57.99l-41.59,6.11c-3.82-15.01-10.37-27.09-19.65-36.24-9.29-9.16-24.1-13.73-44.45-13.73-18.57,0-33.76,4.64-45.59,13.92-11.83,9.29-20.6,22-26.32,38.15-5.72,16.15-8.58,34.53-8.58,55.13,0,32.56,6.87,58.5,20.6,77.83,13.74,19.33,35.23,29,64.48,29,12.71,0,24.73-1.53,36.05-4.58,11.31-3.05,21.42-7.76,30.33-14.12v-59.14h-64.48v-35.48h103.77v111.78c-13.73,12.47-30.2,21.88-49.41,28.23-19.21,6.35-38.22,9.54-57.04,9.54-40.7,0-72.24-12.59-94.62-37.77-22.38-25.18-33.57-60.15-33.57-104.92Z">
                                        </path>
                                        <path class="grok-outline_dash__8_zAL" stroke="#000" fill="#fff"
                                            d="m289.99,26.34h93.09c20.09,0,36.68,2.16,49.79,6.48,13.1,4.33,23.46,10.24,31.09,17.74,7.63,7.5,13.03,15.97,16.21,25.37,3.18,9.41,4.77,19.08,4.77,28.99,0,17.3-3.62,32.18-10.87,44.64-7.25,12.47-18.76,22.26-34.53,29.38l56.84,119.8h-46.16l-50.36-110.26c-3.05.26-6.17.45-9.35.57-3.18.13-6.17.19-8.97.19h-50.36v109.49h-41.2V26.34Zm152.99,80.12c0-9.66-1.78-17.93-5.34-24.8-3.56-6.87-9.86-12.08-18.89-15.64-9.03-3.56-21.56-5.34-37.58-5.34h-49.98v93.85h54.17c15,0,26.71-1.97,35.1-5.91,8.39-3.94,14.24-9.47,17.55-16.6,3.3-7.12,4.96-15.64,4.96-25.56Z">
                                        </path>
                                        <path class="grok-outline_dash__8_zAL" fill="#fff"
                                            d="m522.33,162.92c0-30.52,5.4-56.46,16.21-77.83,10.81-21.36,25.75-37.64,44.83-48.83,19.08-11.19,41.2-16.79,66.38-16.79s47.62,5.53,66.57,16.6c18.94,11.07,33.7,27.15,44.26,48.26,10.55,21.11,15.83,46.93,15.83,77.45s-5.22,56.53-15.64,78.02c-10.43,21.5-25.18,37.84-44.26,49.02-19.08,11.19-41.46,16.79-67.15,16.79s-47.31-5.53-66.38-16.6c-19.08-11.06-33.95-27.21-44.64-48.45-10.68-21.23-16.02-47.12-16.02-77.64Zm43.87-.38c0,32.56,6.93,58.44,20.79,77.64,13.86,19.21,34.65,28.81,62.38,28.81s47.88-9.6,62-28.81c14.12-19.2,21.17-45.08,21.17-77.64s-7.06-58.11-21.17-77.45c-14.12-19.32-34.78-28.99-62-28.99s-48.52,9.67-62.38,28.99c-13.86,19.33-20.79,45.15-20.79,77.45Z">
                                        </path>
                                        <path class="grok-outline_dash__8_zAL" fill="#fff"
                                            d="m825.25,26.34h42.73v125.9l120.18-125.9h46.93l-95.38,101.86,105.3,170.54h-48.07l-87.37-141.92-41.59,43.11v98.81h-42.73V26.34Z">
                                        </path>
                                    </mask>
                                    <rect x="0" y="0" width="1050" height="325.07" mask="url(#stroke)" fill="#050505">
                                    </rect>
                                </svg>

                                <div class="grok-outline_spacer__QUjne"></div>
                                <div class="grok-outline_gradient__7rtND"></div>

                                <div class="grok-outline_mouseMask__7FiGB"
                                    style="transform: translate(677.667px); background: rgb(33, 150, 243); transition: background-color 350ms linear;">
                                    <img alt="" width="200" height="200" style="color:transparent"
                                        src="~/assets/images/cursor_mask.png">
                                </div>
                                <div class="grok-outline_mouseMask__7FiGB grok-outline_second__bX4_B"
                                    style="transform: translate(754.333px, 52.5667px);background: rgb(33, 150, 243);transition: background-color 437.5ms linear;">
                                    <img alt="" width="200" height="200" style="color:transparent"
                                        src="~/assets/images/cursor_mask.png">
                                </div>
                                <div class="grok-outline_mouseMask__7FiGB grok-outline_third__zcD0B"
                                    style="transform: translate(754.333px, 52.5667px);background: rgb(33, 150, 243);transition: background-color 525ms linear;">
                                    <img alt="" width="200" height="200" style="color:transparent"
                                        src="~/assets/images/cursor_mask.png">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <footer>
            <div class="xai-container">
                <div class="site-footer_footer___c5T3">
                    <div class="col-sm-auto"><a href="/grok">Grok</a></div>
                    <div class="col-sm-auto"><a href="/api">API</a></div>
                    <div class="col-sm-auto"><a href="/legal">Legal</a></div>
                    <div class="col-sm-auto"><a href="/legal/privacy-policy">Privacy Policy</a></div>
                    <div class="col-sm-auto"><a href="/security">Security</a></div>
                </div>
            </div>
        </footer>
    </div>

</template>
<style lang="scss">
body {
    display: flex;
    flex-direction: column;
    background: #050505;
    font-display: swap;
}
</style>
<style lang="scss" scoped>
.site-header_placeholder__KcA86 {
    flex: 0 0 77px;
}

@media(min-width:1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .xai-container {
        max-width: 1140px
    }
}

.xai-container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

.site-header_foreground__etqdK {
    min-height: 77px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .site-header_logo__QGAGJ {
        padding-right: 1.5rem;
    }

    .site-header_mainNav__M1I3L {
        flex: 1;
        gap: 21px;
        align-items: center;
        line-height: 1;

         a:hover{
            color: #FFF;
        }
    }
}

.site-header_header__PTnp0 {
    min-height: 77px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background: #050505;

    a {
        color: #9fa1a3;
    }
}

@media (min-width: 768px) {
    .d-sm-flex {
        display: flex !important;
    }
}

.d-none {
    display: none !important;
}



@media (min-width: 768px) {
    .d-sm-none {
        display: none !important;
    }
}

.site-header_integrations__Za5ws {
    display: flex;
    line-height: 1;
    align-items: center;
    gap: 21px;
}

.site-header_integrations__Za5ws {
    align-items: center;
    gap: 21px;
}

.site-header_menuBtn__iQKk8 {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    color: #e7e8e8;
}

.d-block {
    display: block !important;
}

.grok-outline-teaser_teaser__opHLa {
    height: calc(100svh - 77px - 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6rem;
}


.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1*var(--bs-gutter-y));
    margin-right: calc(-.5*var(--bs-gutter-x));
    margin-left: calc(-.5*var(--bs-gutter-x));
}

.grok-outline-teaser_grok__Zcb_U {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grok-outline_logo__Oi8QD {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: center;
    width: 100%;
}

.grok-outline_outline__pwT8v {
    position: relative;
    z-index: 10;
}

.grok-outline_spacer__QUjne {
    flex: 1;
    background: #050505;
    position: relative;
    z-index: 2;
}

.grok-outline_gradient__7rtND {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #6f7374, #0f1518) 0 0;
    opacity: .5;
    animation: grok-outline_gradient__7rtND 4s linear forwards;
    z-index: 3;
}

@media (min-width: 768px) {
    .offset-sm-1 {
        margin-left: 8.33333333%;
    }
}

@media (min-width: 768px) {
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
}

.grok-outline_mouseMask__7FiGB {
    top: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    z-index: 6;
    overflow: hidden;
    transition: transform .1s ease, background-color .1s linear;
    animation: grok-outline_mask__8fqxa 2s linear forwards;
    animation-delay: 0s;
    animation-delay: 2s;
    opacity: 0;
    mix-blend-mode: lighten;
    transform: translate(43%, 32%);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    .grok-outline_second__bX4_B {
        transition: transform .2s ease, background-color .2s linear;



    }

    .grok-outline_third__zcD0B {
        transition: transform .3s ease, background-color .3s linear;
    }
}


@keyframes grok-outline_gradient__7rtND {
    0% {
        opacity: 1
    }

    to {
        opacity: .4
    }
}

@keyframes grok-outline_mask__8fqxa {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}



// footer
.site-footer_footer___c5T3 {
    border-top: 1px solid #333;
    margin-top: 1.5rem;
    padding: 3rem 0;
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
    /* 默认为垂直方向 */
    background: #050505;
    font-size: clamp(0.8888rem, 0.8888rem + 0vw, 0.8888rem);

    a {
        display: inline-block;
        text-decoration: none;
        color: #9fa1a3;
    }

    a:hover {
        color: #fff;
        text-decoration: none;
    }
}

@media (min-width: 768px) {
    .site-footer_footer___c5T3 {
        border-top: none;
        /* 在屏幕宽度至少为 768px 时，边框将不显示 */
        flex-direction: row;
        /* 在屏幕宽度至少为 768px(大于等于768) 时，改为水平方向 */
        align-items: center;
        justify-content: center;
    }

    .site-footer_footer___c5T3 a {
        padding: .25rem 1.5rem;
        /* 在屏幕宽度至少为 768px 时，增加内边距 */
    }

}

@media (min-width: 768px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }
}
</style>